import ReactDOM from 'react-dom'
import { Component } from 'react'
// 类组件定义状态
class App extends Component {
  state = {
    count: 0
  }
  // 第三种解决this指向问题（建议使用第三种）
  // 定义的时候使用箭头函数
  handleClick = (e) => {
    console.log(e);
    console.log(this);//undefined
    // 推导this是undefined的原因
  }
  // handleClick(e) {
  //   console.log(e);
  //   console.log(this);//undefined
  //   // 推导this是undefined的原因
  // }
  render() {
    return (
      <div>
        {/* 1.绑定事件规则,on +事件名称 = {处理函数} ,事件名称遵循大驼峰 */}
        <div >计数器:{this.state.count}</div>
        {/* 将this.handleClick 赋值给onClick ,调用函数通过 onClick ,所以此时的this是undefined*/}
        {/* 解决this问题,方式有三种 */}
        {/* 1.绑定的时候通过箭头函数包裹处理函数 */}
        {/* <button onClick={(e) => this.handleClick(e)}>+1</button> */}
        {/* 2.绑定的时候通过bind */}
        {/* <button onClick={this.handleClick.bind(this)}>+1</button> */}
        {/* 3. 定义的时候使用箭头函数*/}
        <button onClick={this.handleClick.bind(this)}>+1</button>
      </div>
    )
  }
}
// 结论：三种方式都可以，建议第三种，事件处理函数定义为箭头函数
ReactDOM.render(<App />, document.getElementById('root'))

